<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="问题风险改造" data-page-identification="f_xvfhy975y3">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_vbondwkzbp 自定义模板_4kfr68yg2g -->
      <!--          转换为工单-->
      <a-modal
          centered
          v-model:visible="gdState.visible"
          title="转化为工单"
          @ok="submit"
          @cancel="fatherCancel"
          width="1000px"
          destroy-on-close
          :ok-button-props="{ loading: gdState.fatherLoading }"
      >
        <div class="gd-form-content">
          <a-form :model="gdState.modalForm" ref="gdFormRef">
            <a-row>
              <a-col :span="24">
                <a-form-item
                    label="工单标题"
                    :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                    name="content"
                >
                  <a-textarea
                      maxlength="100"
                      show-count
                      placeholder="请输入"
                      v-model:value="gdState.modalForm.content"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="工单类型"
                    :rules="[{ required: true, message: '请选择工单类型', trigger: 'blur' }]"
                    name="type"
                >
                  <a-select
                      :options="[
                                            {
                                                label: '问题转化',
                                                value: '问题转化'
                                            },
                                            {
                                                label: '产品问题',
                                                value: '产品问题'
                                            },
                                            {
                                                label: '数据问题',
                                                value: '数据问题'
                                            },
                                            {
                                                label: '算法问题',
                                                value: '算法问题'
                                            },
                                            {
                                                label: '系统故障',
                                                value: '系统故障'
                                            },
                                            {
                                                label: '产品需求',
                                                value: '产品需求'
                                            },
                                            {
                                                label: '算法需求',
                                                value: '算法需求'
                                            }
                                        ]"
                      v-model:value="gdState.modalForm.type"
                      placeholder="请选择"
                      @change="gdState.modalForm.monitorScene = undefined"
                  />
                  <!--                                  @change="hanldeTypeChange"-->
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="监控场景">
                  <a-select
                      @focus="getMonitorSceneList(false)"
                      show-search
                      :options="gdState.monitorSceneList"
                      v-model:value="gdState.modalForm.monitorScene"
                      placeholder="请选择"
                      :field-names="{ label: 'label', value: 'value' }"
                      :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="优先级"
                    :rules="[{ required: true, message: '请选择优先级', trigger: 'blur' }]"
                    name="priority"
                >
                  <a-select
                      :disabled="gdState.modalForm.type === '产品需求'"
                      v-model:value="gdState.modalForm.priority"
                      :options="[
                                            {
                                                label: 'p0',
                                                value: 'p0'
                                            },
                                            {
                                                label: 'p1',
                                                value: 'p1'
                                            },
                                            {
                                                label: 'p2',
                                                value: 'p2'
                                            },
                                            {
                                                label: 'p3',
                                                value: 'p3'
                                            }
                                        ]"
                      placeholder="请选择"
                  />
                  <!--                                  @change="getSolveTimeByType"-->
                </a-form-item>
              </a-col>
              <a-col :span="12" v-if="gdState.modalForm.type !== '产品需求'">
                <a-form-item
                    label="计划解决时长(小时)"
                    :rules="[
                                        {
                                            pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                            message: '请输入大于0的数字(支持0.5的倍数)',
                                            trigger: 'blur'
                                        }
                                    ]"
                    name="workHours"
                >
                  <a-input-number
                      placeholder="请输入"
                      v-model:value="gdState.modalForm.workHours"
                      @change="getSolveTime"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="计划解决时间"
                    :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                    name="endTime"
                >
                  <a-date-picker
                      show-time
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.endTime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="问题来源"
                    :rules="[{ required: true, message: '请选择问题来源', trigger: 'blur' }]"
                    name="questionSource"
                >
                  <a-select
                      disabled
                      v-model:value="gdState.modalForm.questionSource"
                      placeholder="请选择"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="所属区域"
                    :rules="[{ required: true, message: '请选择所属区域', trigger: 'blur' }]"
                    name="areaCode"
                >
                  <a-select
                      allow-clear
                      show-search
                      :options="gdState.areaList"
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.areaCode"
                      @focus="getGdAreaList"
                      :field-names="{ label: 'label', value: 'value' }"
                      :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      @change="gdAreaChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="所属客户"
                    :rules="[{ required: false, message: '请输入所属客户', trigger: 'blur' }]"
                    name="customer"
                >
                  <a-select
                      allow-clear
                      show-search
                      :options="gdState.customList"
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.customer"
                      @focus="getCustomerList"
                      :field-names="{ label: 'name', value: 'name' }"
                      :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      @change="customerChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="所属项目"
                    :rules="[{ required: true, message: '请选择所属项目', trigger: 'blur' }]"
                    name="projectId"
                >
                  <a-select
                      allow-clear
                      show-search
                      :options="gdState.projectList"
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.projectId"
                      :field-names="{ label: 'projectName', value: 'projectId' }"
                      :filter-option="
                                            (input, option) => {
                                                return (
                                                    option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                )
                                            }
                                        "
                      @focus="getProjectList"
                      @change="projectChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="环境"
                    :rules="[{ required: false, message: '请选择环境', trigger: 'blur' }]"
                    name="environment"
                >
                  <a-select
                      show-search
                      allow-clear
                      :options="gdState.environmentList"
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.environment"
                      :field-names="{ label: 'name', value: 'name' }"
                      :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      @focus="getEnvironmentList"
                      @change="environmentChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                    label="所属产品"
                    :rules="[{ required: false, message: '请选择所属产品', trigger: 'blur' }]"
                    name="production"
                >
                  <a-select
                      show-search
                      allow-clear
                      :options="gdState.productList"
                      placeholder="请选择"
                      v-model:value="gdState.modalForm.production"
                      @change="productChange"
                      @focus="getProductList"
                      :field-names="{ label: 'name', value: 'name' }"
                      :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="版本">
                  <a-input v-model:value="gdState.modalForm.version" disabled />
                </a-form-item>
              </a-col>
            </a-row>
            <div class="description-tip" v-if="currentData.status !== '未开始' && currentData.status"
            ><ExclamationCircleFilled class="tip-img" /> 解决中的工单不支持编辑问题描述</div
            >
            <a-row
                :style="{
                                pointerEvents:
                                    currentData.status === '未开始' ||
                                    !currentData.status ||
                                    currentData.status === '待分发'
                                        ? 'auto'
                                        : 'none'
                            }"
            >
              <a-col :span="24">
                <a-form-item
                    label="问题&风险描述"
                    :rules="[{ required: true, message: '请输入问题&风险描述', trigger: 'blur' }]"
                    name="qillData"
                >
                  <QuillEditor
                      v-model:content="gdState.modalForm.qillData"
                      ref="quillEditor"
                      :options="editorOption"
                      class="quill-editor"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!--                        <a-row>-->
            <!--                            <a-col :span="24">-->
            <!--                                <a-form-item-->
            <!--                                    label="解决人"-->
            <!--                                    :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"-->
            <!--                                    name="solverList"-->
            <!--                                >-->
            <!--                                    <a-select-->
            <!--                                        class="remove-icon"-->
            <!--                                        show-search-->
            <!--                                        mode="multiple"-->
            <!--                                        :options="gdState.allUser"-->
            <!--                                        v-model:value="gdState.modalForm.solverList"-->
            <!--                                        placeholder="请选择"-->
            <!--                                        :field-names="{ label: 'name', value: 'name' }"-->
            <!--                                        :filter-option="-->
            <!--                                            (input, option) => {-->
            <!--                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
            <!--                                            }-->
            <!--                                        "-->
            <!--                                        @change="fatherSolverChange"-->
            <!--                                    />-->
            <!--                                </a-form-item>-->
            <!--                            </a-col>-->
            <!--                        </a-row>-->
            <!--                        &lt;!&ndash;                      <a-col v-if="taskPeopleList.length > 0">&ndash;&gt;-->
            <!--                        <a-col>-->
            <!--                            <div style="width: 700px; margin-left: 135px; margin-bottom: 16px">-->
            <!--                                <a-->
            <!--                                    href="javascript:;"-->
            <!--                                    v-for="(item, num) in taskPeopleList"-->
            <!--                                    @click="handlerAddPeople(item.value, index)"-->
            <!--                                    ><span style="margin: 0 5px">{{ item.value }}</span></a-->
            <!--                                >-->
            <!--                            </div>-->
            <!--                        </a-col>-->
            <a-col :span="24">
              <a-form-item label="上传附件">
                <a-upload
                    v-model:file-list="gdState.modalForm.descriptionAttachmentList"
                    :multiple="true"
                    :before-upload="handlerFatherUpload"
                    @remove="handlerFatherRemove"
                    accept=".xlsx, image/*,.docx,, .xls,.mp4"
                >
                  <a-button type="primary">
                    <upload-outlined />
                    上传
                  </a-button>
                </a-upload>
                <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
              </a-form-item>
            </a-col>
          </a-form>
        </div>
      </a-modal>
      <!--          转换为工单-->
      <div class="body">
        <div class="main">
          <div class="kb-table-box">
            <div style="display: flex; justify-content: end; margin-bottom: 16px">
              <a-button type="primary" v-permission="'50000005_crigazfzcj'" @click="handleAddTable"
              >新建</a-button
              ></div
            >
            <a-table
                :columns="columnState.baseColumns"
                :dataSource="state.selectData.projectProgressQuestionList"
                :scroll="{ y: 550 }"
                :pagination="false"
                :loading="state.tableLoading"
                bordered
                @resizeColumn="handleResizeColumn"
                :showSorterTooltip="false"
                ref="tableRef"
                @change="handleTableChange"
            >
              <template #bodyCell="{ record, text, column, index }">
                <template v-if="column.dataIndex == 'opration'">
                  <a-space>
                    <a-button
                        size="small"
                        type="link"
                        @click="showGd(record)"
                        :disabled="
                                                record.projectType === '平台项目' ||
                                                record.workOrderNumber ||
                                                !record.id
                                            "
                    >转工单</a-button
                    >
                    <a-button
                        size="small"
                        type="link"
                        v-if="record.isEdit"
                        @click="confirmLhwt(record)"
                        :loading="record.okBtnLoading"
                    >完成</a-button
                    >
                    <a-button
                        size="small"
                        type="link"
                        :disabled="!record.id"
                        :loading="record.editLoading"
                        v-else
                        @click="handleEdit(record)"
                    >编辑</a-button
                    >
                    <a-popconfirm
                        title="确定删除吗?"
                        @confirm="confirmDeleteLhwt(record, record.id)"
                    >
                      <a-button size="small" type="link">删除</a-button>
                    </a-popconfirm>
                  </a-space>
                </template>
                <!-- 编辑状态下，展示输入框或选择框 -->
                <template v-if="record.isEdit">
                  <!--                                记录日期-->
                  <template v-if="column.dataIndex === 'meetingDate'">
                    <!--                                        <div class="validate-content">-->
                    <a-date-picker
                        :valueFormat="'YYYY-MM-DD'"
                        style="width: 100%; padding-left: 12px"
                        v-model:value="record.meetingDate"
                        placeholder="选择日期"
                    />
                    <!--                                            <div class="validate-icon"></div>-->
                    <!--                                        </div>-->
                  </template>
                  <!--                                记录日期-->
                  <!--                                会议类型-->
                  <template v-if="column.dataIndex === 'meetingSources'">
                    <a-select
                        style="width: 100%"
                        allow-clear
                        mode="multiple"
                        show-search
                        v-model:value="record.meetingSourceList"
                        :options="state.hylyList"
                        placeholder="请选择"
                        :field-names="{ label: 'itemName', value: 'itemName' }"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                                会议类型-->
                  <!--                                产品线-->
                  <template v-if="column.dataIndex === 'productLine'">
                    <a-select
                        style="width: 100%"
                        allow-clear
                        mode="multiple"
                        show-search
                        v-model:value="record.productLineList"
                        :options="state.productLineList"
                        placeholder="请选择"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                                产品线-->
                  <!--                                项目总监-->
                  <template v-if="column.dataIndex === 'projectDirector'">
                    <a-select
                        :disabled="record.projectType === '平台项目'"
                        allow-clear
                        show-search
                        style="width: 100%"
                        v-model:value="record.projectDirector"
                        :options="state.allUser"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                        :max-tag-count="2"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                                项目总监-->
                  <!--                                pmo-->
                  <template v-if="column.dataIndex === 'pmo'">
                    <a-select
                        :disabled="record.projectType === '平台项目'"
                        allow-clear
                        show-search
                        style="width: 100%"
                        v-model:value="record.pmo"
                        :options="state.allUser"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                        :max-tag-count="2"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                                pmo-->
                  <!--                                项目经理-->
                  <template v-if="column.dataIndex === 'pmName'">
                    <a-select
                        :disabled="record.projectType === '平台项目'"
                        allow-clear
                        show-search
                        style="width: 100%"
                        v-model:value="record.pmName"
                        :options="state.allUser"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                        :max-tag-count="2"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                                项目经理-->
                  <!--                                问题&风险描述-->
                  <template v-if="column.dataIndex === 'questionDescription'">
                    <!--                                        <div class="validate-content">-->
                    <a-textarea
                        v-model:value="record.questionDescription"
                        placeholder="请输入问题&风险描述"
                        :rows="1"
                    />
                    <!--                                            <div class="validate-icon"></div>-->
                    <!--                                        </div>-->
                  </template>
                  <!--                                问题&风险描述-->
                  <!--                                项目进展状态-->
                  <template v-if="column.dataIndex === 'projectProgressStatus'">
                    <!--                                        <div class="validate-content">-->
                    <!--                                            <a-textarea-->
                    <!--                                                v-model:value="record.projectProgressStatus"-->
                    <!--                                                placeholder="请输入项目进展状态"-->
                    <!--                                                :rows="1"-->
                    <!--                                            />-->
                    <!--                                            <div class="validate-icon"></div>-->
                    <!--                                        </div>-->
                    <a-textarea
                        v-model:value="record.projectProgressStatus"
                        placeholder="请输入项目进展状态"
                        :rows="1"
                    />
                  </template>
                  <!--                                项目进展状态-->
                  <!--                                风险类型-->
                  <template v-if="column.dataIndex === 'riskType'">
                    <!--                                        <div class="validate-content">-->
                    <a-select
                        allow-clear
                        show-search
                        style="width: 100%"
                        v-model:value="record.riskType"
                        :options="state.fxlxList"
                        placeholder="请选择"
                        :field-names="{ label: 'itemName', value: 'itemName' }"
                        :filterOption="
                                                (input, option) => {
                                                    return (
                                                        option.itemName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                    )
                                                }
                                            "
                    />
                    <!--                                            <div class="validate-icon"></div>-->
                    <!--                                        </div>-->
                  </template>
                  <!--                                风险类型-->
                  <!--                                解决方案及行动项-->
                  <template v-if="column.dataIndex === 'solutionOrAction'">
                    <a-textarea
                        v-model:value="record.solutionOrAction"
                        :rows="1"
                        placeholder="请输入解决方案及行动项"
                    />
                  </template>
                  <!--                                解决方案及行动项-->
                  <!--                                计划解决日期-->
                  <template v-if="column.dataIndex === 'endTime'">
                    <a-date-picker
                        :valueFormat="'YYYY-MM-DD'"
                        style="width: 100%"
                        v-model:value="record.endTime"
                        placeholder="选择日期"
                    />
                  </template>
                  <!--                                计划解决日期-->
                  <!--                              完成情况反馈  -->
                  <template v-if="column.dataIndex === 'completionStatusFeedback'">
                    <a-textarea
                        v-model:value="record.completionStatusFeedback"
                        :rows="1"
                        placeholder="请输入完成情况反馈"
                    />
                  </template>
                  <!--                              完成情况反馈  -->
                  <!--                              责任人  -->
                  <template v-if="column.dataIndex === 'responsiblePerson'">
                    <!--                                        <div class="validate-content">-->
                    <a-select
                        allow-clear
                        show-search
                        style="width: 100%"
                        v-model:value="record.responsiblePersonList"
                        :options="state.allUser"
                        mode="multiple"
                        :max-tag-count="1"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filterOption="
                                                (input, option) => {
                                                    return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                        :getPopupContainer="getPopupContainer"
                    />
                    <!--                                            <div class="validate-icon"></div>-->
                    <!--                                        </div>-->
                  </template>
                  <!--                              责任人  -->
                  <!--                              问题类型  -->
                  <template v-if="column.dataIndex === 'questionTypeFirst'">
                    <a-tree-select
                        v-model:value="record.questionTypeSecond"
                        show-search
                        treeDefaultExpandAll
                        style="width: 100%"
                        placeholder="请选择"
                        allow-clear
                        :tree-data="state.wtlxList"
                        :fieldNames="{
                                                children: 'children',
                                                label: 'itemName',
                                                value: 'itemName',
                                                key: 'itemCode'
                                            }"
                        :filterTreeNode="
                                                (inputValue, treeNode) => {
                                                    return (
                                                        treeNode.itemName
                                                            .toLowerCase()
                                                            .indexOf(inputValue.toLowerCase()) >= 0
                                                    )
                                                }
                                            "
                        :max-tag-count="1"
                    />
                  </template>
                  <!--                              问题类型  -->
                  <!--                              项目类型  -->
                  <!--                                    <template v-if="column.dataIndex === 'projectType'">-->
                  <!--                                        &lt;!&ndash;                                        <div class="validate-content">&ndash;&gt;-->
                  <!--                                        <a-select-->
                  <!--                                            allow-clear-->
                  <!--                                            style="width: 100%"-->
                  <!--                                            show-search-->
                  <!--                                            v-model:value="record.projectType"-->
                  <!--                                            :options="[-->
                  <!--                                                {-->
                  <!--                                                    label: '交付项目',-->
                  <!--                                                    value: '交付项目'-->
                  <!--                                                },-->
                  <!--                                                {-->
                  <!--                                                    label: '平台项目',-->
                  <!--                                                    value: '平台项目'-->
                  <!--                                                }-->
                  <!--                                            ]"-->
                  <!--                                            placeholder="请选择"-->
                  <!--                                            :field-names="{ label: 'label', value: 'value' }"-->
                  <!--                                            :filterOption="-->
                  <!--                                                (input, option) => {-->
                  <!--                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0-->
                  <!--                                                }-->
                  <!--                                            "-->
                  <!--                                            :max-tag-count="2"-->
                  <!--                                            :getPopupContainer="getPopupContainer"-->
                  <!--                                            @change="projectTypeChange(record)"-->
                  <!--                                        />-->
                  <!--                                        &lt;!&ndash;                                            <div class="validate-icon"></div>&ndash;&gt;-->
                  <!--                                        &lt;!&ndash;                                        </div>&ndash;&gt;-->
                  <!--                                    </template>-->
                  <!--                              项目类型  -->

                  <!--                              是否为共性问题  -->
                  <template v-if="column.dataIndex === 'commonProblems'">
                    <a-select
                        allow-clear
                        style="width: 100%"
                        placeholder="请选择"
                        :options="[
                                                {
                                                    label: '是',
                                                    value: '是'
                                                },
                                                {
                                                    label: '否',
                                                    value: '否'
                                                }
                                            ]"
                        v-model:value="record.commonProblems"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                              是否为共性问题  -->
                  <!--                              体系闭环  -->
                  <template v-if="column.dataIndex === 'systemClosedLoop'">
                    <a-select
                        show-search
                        style="width: 100%"
                        allow-clear
                        placeholder="请选择"
                        :options="state.txbhList"
                        v-model:value="record.systemClosedLoop"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                              体系闭环  -->
                  <!--                              解决方案  -->
                  <template v-if="column.dataIndex === 'solution'">
                    <a-select
                        style="width: 100%"
                        allow-clear
                        show-search
                        placeholder="请选择"
                        :options="state.jjfaList"
                        v-model:value="record.solution"
                        :getPopupContainer="getPopupContainer"
                    />
                  </template>
                  <!--                              解决方案  -->
                </template>
                <!-- 非编辑状态下，展示原始文本 -->
                <template v-else>
                  <template v-if="['工厂名称'].includes(column.title)">
                    <div class="db-click-name" :title="text">{{ text }}</div>
                  </template>
                  <template v-if="['区域', '日期', '项目总监', '项目经理'].includes(column.title)">
                    <div class="db-click">{{ text }}</div>
                  </template>
                  <template v-if="column.dataIndex === 'solutionOrAction'">
                    <div class="progress-click">
                      <a-tooltip
                          :overlay-style="overStyle"
                          v-if="record.solutionOrAction"
                          placement="right"
                      >
                        <template #title>
                          <p
                              v-for="(item, index) in handlerGetSpace(
                                                            record.solutionOrAction
                                                        )"
                              :key="index"
                              style="margin: 0"
                          >{{ item }}</p
                          > </template
                        ><div class="omit-div">{{ text }} </div>
                      </a-tooltip>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'questionDescription'">
                    <div class="question-div">
                      <a-tooltip
                          :overlay-style="overStyle"
                          v-if="record.questionDescription"
                          placement="right"
                      >
                        <template #title>
                          <p
                              v-for="(item, index) in handlerGetSpace(
                                                            record.questionDescription
                                                        )"
                              :key="index"
                              style="margin: 0"
                          >{{ item }}</p
                          > </template
                        ><div class="omit-div-question"
                      ><span v-if="record.questionDescription">{{ text }}</span></div
                      >
                      </a-tooltip>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'projectProgressStatus'">
                    <div class="question-div">
                      <a-tooltip
                          :overlay-style="overStyle"
                          v-if="record.projectProgressStatus"
                          placement="right"
                      >
                        <template #title>
                          <p
                              v-for="(item, index) in handlerGetSpace(
                                                            record.projectProgressStatus
                                                        )"
                              :key="index"
                              style="margin: 0"
                          >{{ item }}</p
                          > </template
                        ><div class="omit-div-status"
                      ><span v-if="record.projectProgressStatus">{{ text }}</span></div
                      >
                      </a-tooltip>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'taskOrWorkOrder'">
                    <a-tooltip :overlay-style="overStyle">
                      <template #title>
                        <template v-if="record.workOrderNumber">
                          <p
                              v-for="(item, index) in handlerGetSpace(record.workOrderNumber)"
                              :key="index"
                              style="margin: 0"
                              @click="jumpGd(record)"
                          >{{ item }}</p
                          >
                        </template>
                        <template v-else>{{ text }}</template>
                      </template>
                      <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
                      ><a
                          v-if="record.workOrderNumber"
                          href="#"
                          @click="jumpGd(record)"
                          style="color: #3875ff; text-decoration: underline"
                      >{{ text }}</a
                      >
                        <span v-else>{{ text }}</span>
                      </div>
                    </a-tooltip>
                  </template>
                  <template v-if="column.dataIndex === 'completionStatusFeedback'">
                    <div class="productionPlan-div">
                      <a-tooltip
                          :overlay-style="overStyle"
                          v-if="record.completionStatusFeedback"
                          placement="right"
                      >
                        <template #title>
                          <p
                              v-for="(item, index) in handlerGetSpace(text)"
                              :key="index"
                              style="margin: 0"
                          >{{ item }}</p
                          > </template
                        ><div class="omit-div-productionPlan" v-if="text">{{ text }}</div>
                      </a-tooltip>
                    </div>
                  </template>
                </template>
                <template v-if="column.dataIndex === 'count'">
                  {{ index + 1 }}
                </template>
                <template v-if="column.dataIndex === 'responsiblePerson'">
                  {{ record.responsiblePersonList?.join(',') }}
                </template>
                <!--                                转Faq状态-->
                <template v-if="column.dataIndex === 'zfaq'">
                  {{ record.faqMilepost ? '已转FAQ' : '未转FAQ' }}
                </template>
                <!--                                转Faq状态-->
                <!--                                转工单状态-->
                <template v-if="column.dataIndex === 'finishStatus'">
                  <template
                      v-if="record.isEdit && !record.workOrderNumber && !record.taskId && record.id"
                  >
                    <a-select
                        style="width: 100%"
                        v-model:value="record.finishStatus"
                        :options="[
                                                {
                                                    label: '未开始',
                                                    value: '未开始'
                                                },
                                                {
                                                    label: '处理中',
                                                    value: '处理中'
                                                },
                                                {
                                                    label: '已完成',
                                                    value: '已完成'
                                                }
                                            ]"
                    />
                  </template>
                  <template v-else
                  ><div class="status-div" :style="{ backgroundColor: getTextColor(text) }"
                  >{{ text }}
                  </div>
                  </template>
                </template>
                <!--                                转状态-->
                <!--                                会议类型-->

                <!--                                会议类型-->
              </template>
            </a-table>
          </div>
        </div>
      </div>
      <!-- end vid_vbondwkzbp 自定义模板_4kfr68yg2g -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
import {
  h,
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  nextTick
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
  cloneDeep,
  localGet,
  merge,
  getDifferenceArray,
  traversalTreeStructure,
  checkCaseCondition,
  renderStringInTemplate,
  handleBreadcrumbJump,
  throttle,
  permission,
  getComponentParamsValue
} from '@/utils/index'
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import {
  propertyFormatByNumber,
  propertyFormatByPercentage,
  propertyFormatByDate,
  parseSubFromDataList
} from '@/utils/format'
import colorTheme from '@/design/custom-theme.json'
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
const props = defineProps({
      'processInstanceId': {
        type: [String, Number, Boolean],
        default: undefined
      },
      'id': {
        type: [String, Number],
        default: undefined
      },
      'from': {
        type: [String, Number],
        default: undefined
      },
      'projectId': {
        type: [String, Number],
        default: undefined
      }
    })
const immediateWatch = (source, callback) => {
  watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
  loading: false,
  tip: undefined
})
const authInfo = localGet('app-user-store')

// 处理校验
const setSubFormName = (parentInfo, name) => {
  return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
// 用于参数变更后重新执行自定义指令
const queryUpdateFlag = ref(0)
onMounted(() => {})

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer)
  })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
onMounted(() => {
  getHyly()
  getProductLineList()
  getLhwtAllUser()
  getFxLx()
  getBaseList()
})
const { id, from } = props
const useId = ref(null)
const useProjectId = ref(null)
const useFrom = ref(null)
import { watchEffect } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
watchEffect(() => {
  if (props.id) {
    setTimeout(() => {
      useId.value = props.id
      useFrom.value = props.from
      useProjectId.value = props.projectId
      getDataSource().then(() => {
        let data = state.dataSource.find(item => item.id === useId.value)
        if (data) {
          state.selectData = data
          // getFactory(state.selectData.areaCode || 0)
        }
      })
    }, 500)
  }
})
const state = reactive({
  dataSource: [],
  selectData: {},
  tableLoading: false,
  hylyList: [],
  productLineList: [],
  allUser: [],
  fxlxList: [],
  wtlxList: [],
  faqList: [],
  txbhList: [],
  finishStatusList: [],
  projectList: []
})
// 转换FAQ
function projectTypeChange(record) {
  if (record.projectType === '交付项目') {
    record.projectId = undefined
  } else if (record.projectType === '平台项目') {
    record.projectId = undefined
    record.areaCode = undefined
    record.projectDirector = undefined
    record.pmName = undefined
  }
  if (!record.projectType) {
    record.projectId = undefined
    record.areaCode = undefined
    record.projectDirector = undefined
    record.pmName = undefined
  }
}
async function getBaseList() {
  // 定义请求接口的 URL 或方法
  const requests = [
    get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search_tree/LHWTKB.WTLX'), // 问题类型
    get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.JJFA'), // 解决方案
    get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.FAQ'), // faq
    get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.TXBH'), // 体系闭环
    get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.GDZT') // 完成状态
  ]

  try {
    // 使用 Promise.allSettled 确保所有请求都会执行
    const results = await Promise.allSettled(requests)

    // 处理每个请求的结果
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        if (index === 0) {
          state.wtlxList = result.value.data
        } else if (index === 1) {
          state.jjfaList = result.value.data.map(item => {
            return {
              label: item.itemName,
              value: item.itemName
            }
          })
        } else if (index === 2) {
          state.faqList = result.value.data.map(item => {
            return {
              label: item.itemName,
              value: item.itemName
            }
          })
        } else if (index === 3) {
          state.txbhList = result.value.data.map(item => {
            return {
              label: item.itemName,
              value: item.itemName
            }
          })
        } else if (index === 4) {
          state.finishStatusList = result.value.data.map(item => {
            return {
              label: item.itemName,
              value: item.itemName
            }
          })
        }
      } else {
        // 请求失败，打印错误
        console.error(`接口 ${index + 1} 请求失败:`, result.reason)
      }
    })
  } catch (error) {
    // 捕获任何其他的错误（比如请求数组外的错误）
    console.error('请求出现意外错误:', error)
  }
}
function getDataSource() {
  state.tableLoading = true
  return post('/solution-ppm/api/v2/built-in-system-ppm/project_progress/search', {
    customSort: { sortDirection: 'ASC', filed: 'AREA' },
    productLine: useFrom.value
  })
      .then(data => {
        state.dataSource = data.data
        return data.data
      })
      .finally(() => {
        state.tableLoading = false
      })
}
function getLhwtAllUser() {
  get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
    if (data.code !== 200) {
      message.error(data.message)
      return
    }
    state.allUser = data.data.userDtoList
  })
}
// 获取风险类型
function getFxLx() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/FXLX').then(data => {
    state.fxlxList = data.data
  })
}
const currentLhwtData = ref({})
const customCellStyle = () => {
  return {
    style: {
      padding: '0 5px'
    }
  }
}
const customOkCellStyle = () => {
  return {
    style: {
      padding: '4px 16px'
    }
  }
}
const columnState = reactive({
  baseColumns: [
    {
      title: '序号',
      dataIndex: 'count',
      align: 'center',
      width: 55,
      fixed: 'left',
      ellipsis: true
    },

    {
      title: '记录日期',
      dataIndex: 'meetingDate',
      align: 'center',
      width: 120,
      fixed: 'left',
      ellipsis: true,
      visible: true,
      customHeaderCell: customCellStyle
    },
    {
      title: '状态',
      dataIndex: 'finishStatus',
      align: 'center',
      ellipsis: true,
      width: 100,
      customHeaderCell: customOkCellStyle
    },
    {
      title: '工单编号',
      dataIndex: 'taskOrWorkOrder',
      align: 'center',
      ellipsis: true,
      width: 150
    },

    {
      title: '问题&风险描述',
      dataIndex: 'questionDescription',
      ellipsis: true,
      align: 'center',
      resizable: true,
      width: 350,
      minWidth: 350,
      visible: true,
      customHeaderCell: customCellStyle
    },
    {
      title: '解决方案及行动项',
      dataIndex: 'solutionOrAction',
      ellipsis: true,
      align: 'center',
      resizable: true,
      width: 350,
      minWidth: 350,
      visible: true,
      customHeaderCell: customCellStyle
    },
    {
      title: '责任人',
      dataIndex: 'responsiblePerson',
      align: 'center',
      ellipsis: true,
      visible: true,
      width: 150,
      customHeaderCell: customOkCellStyle
    },
    {
      title: '计划完成日期',
      dataIndex: 'endTime',
      align: 'center',
      ellipsis: true,
      width: 150,
      visible: true,
      customHeaderCell: customOkCellStyle
    },
    {
      title: '完成情况反馈',
      dataIndex: 'completionStatusFeedback',
      ellipsis: true,
      align: 'center',
      resizable: true,
      width: 350,
      minWidth: 350,
      visible: true,
      customHeaderCell: customCellStyle
    },
    {
      title: '风险类型',
      dataIndex: 'riskType',
      align: 'center',
      width: 150,
      ellipsis: true,
      visible: true,
      customHeaderCell: customCellStyle
    },
    {
      title: '会议类型',
      dataIndex: 'meetingSources',
      align: 'center',
      ellipsis: true,
      width: 120
    },
    {
      title: '产品线',
      dataIndex: 'productLine',
      align: 'center',
      ellipsis: true,
      width: 120
    },
    {
      title: '问题来源',
      dataIndex: 'questionSource',
      align: 'center',
      ellipsis: true,
      width: 120
    },
    {
      title: '项目类型',
      dataIndex: 'projectType',
      align: 'center',
      width: 150,
      ellipsis: true,
      visible: true,
      customHeaderCell: customCellStyle
    },

    {
      title: '项目总监',
      dataIndex: 'projectDirector',
      ellipsis: true,
      align: 'center',
      visible: true,
      width: 120,
      customHeaderCell: customCellStyle
    },
    {
      title: '项目经理',
      dataIndex: 'pmName',
      align: 'center',
      ellipsis: true,
      visible: true,
      width: 120,
      customHeaderCell: customOkCellStyle
    },
    {
      title: 'PMO',
      dataIndex: 'pmo',
      align: 'center',
      ellipsis: true,
      visible: true,
      width: 120,
      customHeaderCell: customOkCellStyle
    },
    {
      title: '问题类型',
      dataIndex: 'questionTypeFirst',
      align: 'center',
      ellipsis: true,

      width: 150
    },
    {
      title: '问题二级分类',
      dataIndex: 'questionTypeSecond',
      align: 'center',
      ellipsis: true,

      width: 120
    },
    {
      title: '解决方案',
      dataIndex: 'solution',
      align: 'center',
      ellipsis: true,

      width: 120
    },
    {
      title: 'FAQ',
      dataIndex: 'faqMilepost',
      align: 'center',
      ellipsis: true,

      width: 120
    },
    {
      title: '是否共性问题',
      dataIndex: 'commonProblems',
      align: 'center',
      ellipsis: true,

      width: 120
    },
    {
      title: '体系闭环',
      dataIndex: 'systemClosedLoop',
      resizable: true,
      align: 'center',
      ellipsis: true,

      width: 120
    },
    {
      title: '项目进展状态',
      dataIndex: 'projectProgressStatus',
      align: 'center',
      resizable: true,
      ellipsis: true,

      width: 160
    },

    {
      title: '转FAQ状态',
      dataIndex: 'zfaq',
      align: 'center',
      ellipsis: true,

      width: 150,
      customHeaderCell: customOkCellStyle
    },

    {
      title: '操作',
      dataIndex: 'opration',
      resizable: true,
      visible: true,
      align: 'center',
      fixed: 'right',
      width: 200
    }

    // 其他通用列
  ],
  oldColumns: []
})
const colorMap = {
  '解决中': '#3875FF',
  '未转化': '#9254DE',
  '未开始': '#BBBBBB',
  '已解决': '#52C41A',
  '进行中': '#3875ff',
  '处理中': '#3875ff',
  '已完成': '#52C41A',
  '延期': '#F5222D',
  '延期解决': '#FF7400',
  '无需解决': '#FFC900',
  '已关闭': '#898989',
  '已回访': '#3FA7FF',
  '待分发': '#FF7D27',
  '进行中': '#3875FF',
  '审批中': '#1890FF',
  '未启动': '#BBBBBB',
  '完成': '#52C41A',
  '延期完成': '#FA8C16',
  '测试中': '#A0D911',
  '延期': '#FA3D16',
  '提测': '#A0D911',
  '验收': '#9254DE'
}
function getTextColor(text) {
  return colorMap[text] || '#9dbaff'
}
function handleEdit(record) {
  record.editLoading = true
  put(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/modify_lock/${record.id} `)
      .then(async data => {
        if (data.code !== 200) {
          message.error('有人正在操作')
          return
        }
        record.isEdit = true
      })
      .finally(() => {
        record.editLoading = false
      })
}

function handleAddTable() {
  // let chooseData = state.projectList.find(item => item.value === useProjectId.value)
  let chooseData = state.dataSource.find(item => item.projectId === useProjectId.value)
  state.selectData.projectProgressQuestionList.unshift({
    meetingDate: dayjs().format('YYYY-MM-DD'),
    meetingSourceList: useFrom.value === 'END_TO_END' ? ['日例会'] : ['周例会'],
    areaCode: undefined,
    solution: undefined,
    projectId: undefined,
    projectDirector: chooseData?.projectDirector?.split(',')[0] || undefined,
    pmName: chooseData?.pmName || undefined,
    pmo: chooseData?.pmo || undefined,
    questionDescription: undefined,
    responsiblePersonList: undefined,
    endTime: undefined,
    completionStatusFeedback: undefined,
    questionTypeFirst: undefined,
    questionTypeSecond: undefined,
    faq: undefined,
    commonProblems: undefined,
    systemClosedLoop: undefined,
    solutionOrAction: undefined,
    projectType: '交付项目',
    finishStatus: '未启动',
    isNew: true,
    isEdit: true,
    questionSource: '进度表',
    productLineList: [useFrom.value]
  })
}
// 暴露给父组件
defineExpose({
  handleAddTable
})
const editData = ref({})
function confirmLhwt(record) {
  editData.value = record

  finallyConfirmLhwt(record)
}
function finallyConfirmLhwt(record) {
  record.okBtnLoading = true
  const api = editData.value.isNew ? post : put
  api('/solution-ppm/api/v2/built-in-system-ppm/meeting_question', {
    ...editData.value,
    projectId: useProjectId.value,
    areaCode: state.selectData.areaCode
  })
      .then(data => {
        if (data.code !== 200) {
          message.error(data.message)
          return
        }
        message.success(data.message)

        if (editData.value.isNew) {
          // 新建数据的情况
          const index = state.selectData.projectProgressQuestionList.findIndex(item => item === record)
          if (index !== -1) {
            // 用后端返回的数据替换临时数据
            state.selectData.projectProgressQuestionList.splice(index, 1, {
              ...data.data,
              isEdit: false
            })
          }
        } else {
          // 编辑现有数据的情况
          Object.assign(record, data.data, { isEdit: false })
        }
      })
      .finally(() => {
        editData.value = {}
        record.okBtnLoading = false
      })
}
//     转化为工单
import { QuillEditor, Quill } from '@vueup/vue-quill'
import ImageUploader from 'quill-image-uploader'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const titleConfig = [
  { Choice: ' .ql-bold', title: '加粗' },
  { Choice: ' .ql-italic', title: '斜体' },
  { Choice: ' .ql-underline', title: '下划线' },
  { Choice: ' .ql-strike', title: '删除线' },
  { Choice: ' .ql-blockquote', title: '块引用' },
  { Choice: ' .ql-code-block', title: '插入代码' },
  { Choice: ' .ql-size', title: '字体大小' },
  { Choice: ' .ql-size', title: '字体大小' },
  { Choice: ' .ql-color', title: '字体颜色' },
  { Choice: ' .ql-background', title: '字体背景颜色' },
  { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
  { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
  { Choice: ' .ql-header[value="1"]', title: '1级标题' },
  { Choice: ' .ql-header[value="2"]', title: '2级标题' },
  { Choice: ' .ql-align', title: '对齐方式' },
  { Choice: ' .ql-clean', title: '清除字体格式' },
  { Choice: ' .ql-image', title: '图像' },
  { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]
// 注册图片上传模块
Quill.register('modules/imageUploader', ImageUploader)

// 将本地文件转换为URL
const getLocalImageURL = file => {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = e => {
      resolve(e.target.result)
    }
    reader.readAsDataURL(file)
  })
}

// 表单数据

// Quill 编辑器选项
const editorOption = ref({
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
      ['blockquote', 'code-block'], // 引用，代码块
      [{ header: 1 }, { header: 2 }], // 标题1，标题2
      [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
      [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
      [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
      [{ align: [] }], // 对齐
      ['clean'], // 清除格式
      ['image'] // 链接，图片，视频
    ]
    // ImageUploader: imageHandler
  }
})

// 将 dataURL 转换为 File 对象的辅助函数
const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}
const gdState = reactive({
  visible: false,
  fatherLoading: false,
  modalForm: {
    content: undefined,
    type: '问题转化',
    priority: 'p2',
    questionSource: '问题转化',
    workHours: undefined,
    endTime: undefined,
    areaCode: undefined,
    projectId: undefined,
    version: undefined,
    customer: undefined,
    production: undefined,
    environment: undefined,
    description: undefined,
    monitorScene: undefined,
    solverList: [],
    descriptionAttachmentList: [],
    qillData: ''
  },
  projectList: [],
  wtlyList: [],
  customList: [],
  productList: [],
  areaList: [],
  environmentList: [],
  monitorSceneList: []
})
// 获取问题来源
function getWtly() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/GD.WTLY').then(data => {
    if (data.code !== 200) {
      message.error(data.message)
      return
    }
    gdState.wtlyList = data.data.map(item => {
      return {
        label: item.itemName,
        value: item.itemName
      }
    })
  })
}
const quillEditor = ref(null) // 引用QuillEditor组件
const answerQuillEditor = ref(null) // 引用QuillEditor组件
const currentData = ref({})
async function showGd(record) {
  convertId.value = record.id
  await getGdAreaList()
  await getProjectList() // 获取项目列表
  await getEnvironmentList() // 获取环境列表
  await getCustomerList() // 获取客户列表
  await getProductList() // 获取产品列表
  gdState.visible = true
  nextTick(() => {
    initTitle()
    const data = cloneDeep(record)
    gdState.modalForm.areaCode = state.selectData.areaCode
    gdState.modalForm.content = state.selectData.questionDescription
    if (data.endTime) {
      gdState.modalForm.endTime = dayjs(data.endTime).format('YYYY-MM-DD HH:mm:ss')
    }
    gdState.modalForm.projectId = state.selectData.projectId
    quillEditor.value.setText(data.questionDescription + data.solutionOrAction)
  })
}
function initTitle() {
  document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
  for (let item of titleConfig) {
    let tip = document.querySelector('.ql-toolbar' + item.Choice)
    if (!tip) continue
    tip.setAttribute('title', item.title)
  }
}
const gdFormRef = ref(null)
// 上传API
const uploadFileAPI = async file => {
  const data = new FormData()
  data.append('file', file)

  return post('/file-storage/api/v1/file/upload', data)
      .then(({ data: { fullUrl } }) => {
        return { data: { fullUrl } }
      })
      .catch(error => {
        console.error('上传图片出错:', error)
        throw error // 抛出错误以供外部处理
      })
}
const convertId = ref()
//     父工单提交表单
function submit() {
  gdFormRef.value.validate().then(async () => {
    gdState.fatherLoading = true
    const deltaContent = quillEditor.value.getContents()

    const imageUploadPromises = []

    deltaContent.ops.forEach(op => {
      if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
        const localSrc = op.insert.image

        // 如果是 base64 图片，上传并替换为 URL
        const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

        const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
          // 替换 op 中的 base64 URL 为服务器返回的 URL
          op.insert.image = fullUrl
        })

        imageUploadPromises.push(uploadPromise)
      }
    })
    try {
      await Promise.all(imageUploadPromises)
      // 新建保存逻辑
      const params = { ...gdState.modalForm }
      params.description = JSON.stringify(deltaContent)
      post(
          `/solution-ppm/api/v2/built-in-system-ppm/meeting_question/transfer_to_work_order/${convertId.value}`,
          params
      )
          .then(data => {
            if (data.code !== 200) {
              message.error(data.message)
              return
            }
            message.success(data.message)
            gdState.visible = false
            resetFather()
            getDataSource().then(() => {
              let data = state.dataSource.find(item => item.id === useId.value)
              if (data) {
                state.selectData = data
                // getFactory(state.selectData.areaCode || 0)
              }
            })
          })
          .finally(() => {
            gdState.fatherLoading = false
          })
    } catch (error) {
      gdState.fatherLoading = false
      console.error('图片上传失败', error)
      return // 终止提交
    }
  })
}
function resetFather() {
  gdState.modalForm = {
    content: undefined,
    type: '问题转化',
    priority: 'p2',
    questionSource: '问题转化',
    workHours: undefined,
    endTime: undefined,
    areaCode: undefined,
    projectId: undefined,
    version: undefined,
    customer: undefined,
    production: undefined,
    environment: undefined,
    description: undefined,
    solverList: [],
    descriptionAttachmentList: [],
    qillData: ''
  }
}
function fatherCancel() {
  gdState.visible = false
  resetFather()
}
function hanldeTypeChange() {
  if (gdState.modalForm.type === '产品需求') {
    gdState.modalForm.priority = 'p3'
    getSolveTimeByType('p3')
  } else {
    gdState.modalForm.priority = gdState.modalForm.endTime = gdState.modalForm.workHours = undefined
  }
}
//     根据类型获取解决时间
function getSolveTimeByType(type) {
  let num = 0
  if (type == 'p0') {
    num = 2
    gdState.modalForm.workHours = 2
  } else if (type == 'p1') {
    num = 24
    gdState.modalForm.workHours = 24
  } else if (type == 'p2') {
    num = 48
    gdState.modalForm.workHours = 48
  } else if (type == 'p3') {
    num = 48
    gdState.modalForm.workHours = 336
  }
  getSolveTime()
}
//     计算解决时间
function getSolveTime() {
  return
  // 获取当前时间
  let currentDate = dayjs()
  let num = gdState.modalForm.workHours
  // 计算新时间
  let newDate = currentDate.add(num, 'hour')

  // 格式化新时间为 "YYYY-MM-DD HH:mm" 格式
  let formattedDate = newDate.format('YYYY-MM-DD HH:mm:ss')

  gdState.modalForm.endTime = formattedDate
}
// 区域变
function gdAreaChange() {
  gdState.modalForm.customer =
      gdState.modalForm.projectId =
          gdState.modalForm.environment =
              gdState.modalForm.production =
                  gdState.modalForm.version =
                      gdState.modalForm.milepostId =
                          gdState.modalForm.taskId =
                              undefined
}
// 客户改变如果没有选区域自动带区域
function customerChange() {
  let arae = gdState.customList.find(item => item.name === gdState.modalForm.customer)
  if (arae) {
    gdState.modalForm.areaCode = arae.areaCode
  }
  gdState.modalForm.environment = undefined
}
// 环境变
function environmentChange() {
  gdState.modalForm.production = gdState.modalForm.version = undefined
}
// 项目变
function projectChange() {
  gdState.modalForm.environment =
      gdState.modalForm.production =
          gdState.modalForm.version =
              gdState.modalForm.milepostId =
                  gdState.modalForm.taskId =
                      undefined
}
// 产品变
function productChange() {
  gdState.modalForm.version = undefined
  getVersionList()
}
// 获取版本
function getVersionList() {
  let envId = gdState.environmentList.find(item => item.name === gdState.modalForm.environment)?.id
  let productId = gdState.productList.find(item => item.name === gdState.modalForm.production)?.id
  get(
      `/solution-ppm/api/v2/built-in-system-ppm/work_order/version?envId=${envId ? envId : ''}&productId=${
          productId ? productId : ''
      }`
  ).then(data => {
    gdState.modalForm.version = data.data
  })
}
// 项目
function getProjectList() {
  if (gdState.modalForm.areaCode) {
    get(
        `/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/${gdState.modalForm.areaCode}`
    ).then(data => {
      if (data.code !== 200) {
        message.error(data.message)
        return
      }
      gdState.projectList = data.data
    })
  } else {
    get(`/solution-ppm/api/v2//built-in-system-ppm/work_order/project_by_area_code/0`).then(data => {
      if (data.code !== 200) {
        message.error(data.message)
        return
      }
      gdState.projectList = data.data
    })
  }
}
function getFactory(record) {
  get(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/get_project_by_area_code/${record}`).then(
      data => {
        state.projectList = data.data.map(item => {
          return {
            label: item.projectShortName,
            value: item.projectId,
            pmName: item.pmName,
            projectDirector: item.projectDirector,
            pmo: item.projectManagementOffice
          }
        })
      }
  )
}
function getGdAreaList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/work_order/area_info').then(data => {
    if (data.code !== 200) {
      message.error(data.message)
      return
    }
    gdState.areaList = data.data.map(item => {
      return {
        label: item.areaName,
        value: item.areaCode
      }
    })
  })
}

function getCustomerList() {
  get(
      `/solution-ppm/api/v2/built-in-system-ppm/work_order/customer?areaCode=${
          gdState.modalForm.areaCode ? gdState.modalForm.areaCode : ''
      }`
  ).then(data => {
    if (data.code !== 200) {
      message.error(data.message)
      return
    }
    gdState.customList = data.data
  })
}
// 获取监控场景list
function getMonitorSceneList(flag) {
  const params = gdState.modalForm.type
  get(`/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/${params}`).then(data => {
    if (data.code !== 200) {
      message.error(data.message)
      return
    }
    gdState.monitorSceneList = data.data.map(item => {
      return {
        label: item.itemName,
        value: item.itemCode
      }
    })
  })
}
// 产品
function getProductList() {
  let envId = gdState.environmentList.find(item => item.name === gdState.modalForm.environment)?.id
  get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/product?envId=${envId ? envId : ''}`).then(data => {
    gdState.productList = data.data
  })
}
// 获取环境
function getEnvironmentList() {
  let customerId = gdState.customList.find(item => item.name === gdState.modalForm.customer)?.id
  get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/env?customerId=${customerId ? customerId : ''}`).then(
      data => {
        gdState.environmentList = data.data
      }
  )
}
// 父上传文件
function handlerFatherUpload(file) {
  gdState.fatherLoading = true
  const data = new FormData()
  data.append('file', file)

  post('/file-storage/api/v1/file/upload', data)
      .then(({ data: { fullUrl } }) => {
        if (data) {
          // 新文件对象
          const newFile = {
            uid: file.uid,
            lastModified: file.lastModified,
            name: file.name,
            size: file.size,
            type: file.type,
            status: 'done',
            url: fullUrl
          }

          // 去重，保留一个副本
          gdState.modalForm.descriptionAttachmentList = [
            // 保留已存在文件（去除重复）
            ...gdState.modalForm.descriptionAttachmentList.filter(
                item => item.uid !== file.uid && item.name !== file.name
            ),
            // 添加新的文件
            newFile
          ]
        }
        gdState.fatherLoading = false
      })
      .catch(e => {
        message.error('上传失败' + e)
      })

  return false
}
// 父移除文件
function handlerFatherRemove(file) {
  gdState.modalForm.descriptionAttachmentList = gdState.modalForm.descriptionAttachmentList.filter(
      item => item.uid !== file.uid
  )
}
// 父上传文件
// 会议类型
function getHyly() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.HYLY').then(data => {
    state.hylyList = data.data
  })
}
// 产品线
function getProductLineList() {
  get('/solution-ppm/api/v2/built-in-system-ppm/dictionary/search/LHWTKB.CPX').then(data => {
    state.productLineList = data.data.map(item => {
      return {
        label: item.productLineName,
        value: item.productLineCode
      }
    })
  })
}
function confirmDeleteLhwt(record, id) {
  // if (!state.permission) {
  //     message.info('暂无权限')
  //     return
  // }
  if (record.isNew) {
    state.selectData.projectProgressQuestionList.shift()
  } else {
    del(`/solution-ppm/api/v2/built-in-system-ppm/meeting_question/${id}`).then(data => {
      if (data.code !== 200) {
        message.error(data.message)
        return
      }
      message.success(data.message)
      getDataSource().then(() => {
        let data = state.dataSource.find(item => item.id === useId.value)
        if (data) {
          state.selectData = data
        }
      })
    })
  }
}
function handlerGetSpace(data) {
  return data?.split(/[;；]/)
}
const overStyle = ref({
  maxWidth: '500px',
  fontSize: '16px'
})
const handleResizeColumn = (w, col) => {
  const width = w - 50 // 确保宽度被计算并且减去额外空间

  // 根据列标题来确定不同的 div
  let div = null
  if (col.title === '解决方案及行动项') {
    div = document.querySelectorAll('.omit-div')
  } else if (col.title.includes('问题&风险描述')) {
    div = document.querySelectorAll('.omit-div-question')
  } else if (col.title === '项目进展状态') {
    div = document.querySelectorAll('.omit-div-status')
  }

  // 如果找到了对应的 div，更新其宽度
  if (div.length > 0) {
    div.forEach(item => {
      item.style.width = `${width}px`
    })
    overStyle.value.maxWidth = `${width}px` // 更新 tooltip 最大宽度
  }

  // 更新 columnState 中的列宽
  columnState.baseColumns = columnState.baseColumns.map(item => {
    if (item.dataIndex === col.dataIndex) {
      return { ...item, width: w } // 更新该列的宽度
    }
    return item
  })

  // 如果列有子列，确保子列也能根据父列的宽度进行更新
  if (col.children) {
    col.children.forEach(child => {
      columnState.baseColumns = columnState.baseColumns.map(item => {
        if (item.dataIndex === child.dataIndex) {
          return { ...item, width: w } // 更新子列的宽度
        }
        return item
      })
    })
  }
}
function jumpGd(record) {
  const isLocal = window.location.host.includes('localhost')
  if (isLocal) {
    window.open(
        `${import.meta.env.VITE_PUBLIC_PATH}/page/xingongdan?number=${record.workOrderNumber}`,
        '_blank'
    )
  } else {
    window.open(
        `${import.meta.env.VITE_PUBLIC_PATH}/allin-app/app_3000000079/page/3000001111?number=${
            record.workOrderNumber
        }`,
        '_blank'
    )
  }
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
  height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table) {
  flex: auto;
  overflow: auto;
}
.table-moreBtn_down {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
  height: 100%;
  width: 50%;
}
/*样式*/
.page_root {
  background-color: #fff;
}
.body {
  background-color: #fff;
  height: 100%;
  padding-top: 16px;
}
.top-tab {
  height: 65px;
  padding: 16px 24px;
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
}
.kb-table-box {
  padding: 0 24px;
  padding-bottom: 24px;
  border-radius: 2px;
  background-color: #fff;
}
.kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  color: #fff;
  font-weight: 600;
  padding: 8px 4px;
  border-right: 1px solid #d9d9d9 !important;
  position: relative;
}
.kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #262626;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 4px;
  word-break: break-all;
}
.gd-form-content :deep(.ant3-form-item-label) {
  width: 135px;
}
.gd-form-content :deep(.ant3-input-number),
:deep(.ant3-picker) {
  width: 100%;
}
.gd-form-content :deep(.ql-snow .ql-editor) img {
  width: 200px;
}
.status-div {
  color: #fff;
  margin: 0 auto;
  border-radius: 4px;
  height: 25px;
  line-height: 25px;
}
.omit-div,
.omit-div-question,
.omit-div-productionPlan,
.omit-div-customerRelationship {
  width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 100%;
  padding: 0 8px;
}
/*样式*/
</style>
